<template>
  <nav class="tab-bar border-top">
    <router-link
      class="tab-item"
      v-for="item in tabData"
      :key="item.id"
      :to="{ name: item.id }"
    >
      <span class="icon" :style="getStyle(item)"></span>
      <span class="text">{{ item.title }}</span>
    </router-link>
  </nav>
</template>

<script>
export default {
  name: "tab-bar",
  data() {
    return {
      tabData: [
        {
          id: "home",
          title: "首页",
          x1: 83,
          y1: 41.5,
          x2: 83,
          y2: 0,
        },
        {
          id: "msg",
          title: "消息",
          x1: 41.5,
          y1: 41.5,
          x2: 0,
          y2: 41.5,
        },
        {
          id: "mine",
          title: "我的",
          x1: 124.5,
          y1: 0,
          x2: 83,
          y2: 83,
        },
      ],
    };
  },
  methods: {
    getStyle(item) {
      return {
        "background-position": `-${
          this.$route.name === item.id ? item.x2 : item.x1
        }px -${this.$route.name === item.id ? item.y2 : item.y1}px`,
      };
    },
  },
};
</script>


<style lang="scss" scoped>
.tab-bar {
  position: absolute;
  left: 0;
  bottom: 0;
  width: 100%;
  height: 49px;
  display: flex;
  justify-content: space-around;
  align-items: center;
  background-color: #fff;
  .tab-item {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    color: #666;
    transform: scale(0.7);
    text-decoration: none;
    &.router-link-active {
      color: #dd1a21;
    }
    .icon {
      width: 41.5px;
      height: 41.5px;
      background-image: url(http://yanxuan-static.nosdn.127.net/hxm/yanxuan-mall-wap/assets/img/tabBar-03798737fd389001ec3da466a3fa4462.png);
    }
    .text {
      margin-top: 4px;
    }
  }
}
</style>
